<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>申请认证商家列表</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css" />
    <!--<link rel="stylesheet" href="__ASSETS__/css/ace.min.css" />-->
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />
    <style>
        body{
            height: 100% ;
            overflow: hidden;
            background: white;
        }
        .form-title {
            height: 40px;
            /*min-width: 60px;*/
            text-align: right;
        }
        .checkHead table .form-value input{
            height: 34px;
            width: 200px;
        }
        #user_table tr td{
            vertical-align: inherit;!important;
        }
        .my_skin .layui-layer-btn a{
            border-color: #999;!important;
            background-color: white;!important;
            color: #333;!important;
        }
        .delete_a{
            cursor: pointer;
        }
        .table-responsive{
            height:calc(100% - 90px)
        }
        .bootstrap-table{
            height:100%
        }
        .fixed-table-container{
            height:calc(100% - 60px) !important;
        }
    </style>
</head>
<body>
<div id="content">
<!--搜索-->
<div class="checkHead" style="padding-top: 10px;height: 90px;" >
    <table class="checkHead-table" style="/*position: absolute;right: 0px;*/">
        <tr>
            <td class="form-title">
                城市：
            </td>
            <td class="form-value">
                <input v-model="searchData.city" type="text" class="search county" readonly="readonly" placeholder="请选择城市"/>&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td class="form-title">
                联系电话：
            </td>
            <td class="form-value">
                <input v-model="searchData.tel" type="text" class="search" placeholder="请输入联系电话" />&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
        </tr><tr>
            <td class="form-title">
                店铺名称：
            </td>
            <td class="form-value">
                <input v-model="searchData.name" type="text" class="search" placeholder="请输入店铺名称" />&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td class="form-title">
                负责人：
            </td>
            <td class="form-value">
                <input v-model="searchData.manager" type="text" class="search" placeholder="请输入负责人" />&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td>
                <button class="btn btn-default" v-on:click ="searchs()">
                    <i class="icon-refresh align-top bigger-125"></i>
                    查询
                </button>
                <button class="btn btn-default" v-on:click="refresh">
                    <i class="icon-reply align-top bigger-125"></i>
                    重置
                </button>
            </td>
        </tr>
    </table>
</div>


<div class="modal fade" id="countyModal" tabindex="-1" role="dialog" aria-labelledby="countyModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 600px;height: 500px;">
            <div class="modal-header" style="width: 100%;height: 50px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="countyModalLabel">选择郡:</h4>
            </div>
            <div class="modal-body" style="width: 100%;height: 385px;overflow: auto;">
                <div class="zTreeDemoBackground left" id="div_tree" style="">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
            <div class="modal-footer" style="width: 100%;height: 65px;">
                <button type="button" class="btn btn-default" onclick="saveCounty();" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="refuseModal" tabindex="-1" role="dialog" aria-labelledby="refuseModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="refuseModalLabel">拒绝理由:</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <table>
                        <tr>
                            <td class="form-title">
                                拒绝理由：
                            </td>
                            <td class="form-value">
                                <textarea v-model="formData.message" cols="60" rows="5" placeholder="拒绝理由"></textarea>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="refuseAuth()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</div>

<div class="table-responsive" style="background:white;margin-top: 0px;">
    <table class="table" id="user_table"></table>
</div>

<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/supplies/vue-validator.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/ztree/jquery.ztree.all.min.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script>
    var searchData = {};
    var setting = {
        view: {
            selectedMulti: false
        },
        async: {
            enable: true,
            url: "{:url('apishop/Index/getAreaTree')}",
            autoParam: ["name", "nameEn"],
            otherParam: { "otherParam": "zTreeAsyncTest" },
            dataFilter: filter
        },
        callback: {
            beforeClick: beforeClick,
            beforeAsync: beforeAsync,
            onAsyncError: onAsyncError,
            onAsyncSuccess: onAsyncSuccess
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            {
            }
        } else {
            return true;
        }
    }
    var log, className = "dark";
    function beforeAsync(treeId, treeNode) {

        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
        return true;
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        showLog("[ " + getTime() + " onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        showLog("[ " + getTime() + " onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    function refreshNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = e.data.type,
            silent = e.data.silent,
            nodes = zTree.getSelectedNodes();
        if (nodes.length == 0) {
            alert("请先选择一个父节点");
        }
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.reAsyncChildNodes(nodes[i], type, silent);
            if (!silent) zTree.selectNode(nodes[i]);
        }
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);

        $(".county").on("click",function(){
            $('#countyModal').modal({
                keyboard: true
            })
        })
    });
    var tableheight = document.documentElement.clientHeight - 96;
    // 用户管理
    $('#user_table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Supplier/supplierAuthList")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                align: 'center',
                title: '序号',
                width:120
            }, {
                field: 'registration_time',
                align: 'center',
                title: '申请时间'
            }, {
                field: 'name',
                align: 'center',
                title: '店铺名称'
            }, {
                field: 'manager',
                align: 'center',
                title: '负责人'
            }, {
                field: 'post_code',
                align: 'center',
                title: '邮编'
            }, {
                field: 'address',
                align: 'center',
                title: '地址'
            }, {
                field: 'tel',
                align: 'center',
                title: '联系电话'
            }, {
                field: 'company_code',
                align: 'center',
                title: '公司注册号码'
            }, {
                title: '操作',
                align: 'center',
                width: 220,
                formatter: operateFormatter
            }
        ],
        queryParams: function (params) {
            var param = {
                search: searchData,
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });
    // 详情按钮
    function operateFormatter(val, row, index) {

        var divStr = "<div class='form-inline'>"
        var detailStr = "<a href='javascript:void(0);' class='detail_a' onclick='supplierSuccess(1,"+row.id+")'>通过</a>&nbsp;&nbsp;" +
            "<a href='javascript:void(0);' class='detail_a' onclick='refuseModal(1,"+row.id+")'>拒绝</a>";
        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }
    //拒绝详细
    function refuseModal(index,id){
        $('#refuseModal').modal({
            keyboard: true
        });
        vm.id = id;
    }

    function supplierSuccess(index , id ) {
        vm.successAuth(index , id);
    }

    function saveCounty(){
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getSelectedNodes();
        console.log(nodes);
        if(nodes.length == 0){
            alert("请选择郡");
            return false;
        }
        $(".county").val(nodes[0].name);
    }
    vm = new Vue( {
        el : "#content" ,
        data : {
            searchData : {
            } ,
            formData:{
                message : '',
            },
            id:'',
        } ,
        methods : {
            searchs : function ( index ) {
                searchData = this.searchData;
                var city = $('.county').val();
                if(city)
                {
                    searchData.city = $('.county').val();
                }
                if ( index == 1 ) {
                    $( "#user_table" ).bootstrapTable( 'refresh' );
                } else {
                    $( "#user_table" ).bootstrapTable( 'refresh' );
                }
            } ,
            //审核通过
            successAuth : function (index , id) {
                layer.config({
                    skin:"my_skin"
                })
                layer.confirm('您确定通过审核吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.ajax({
                        url : '{:url("admin/Supplier/authSupplier")}',
                        type : "POST",
                        data:{'id':id, 'type':1},
                        success : function (data) {
                            layer.confirm(data.msg, {
                                time: 20000, //20s后自动关闭
                                btn: ['关闭']
                            },function () {
                                location.reload();
                            });
                        }
                    })
                });
            },
            //审核拒绝
            refuseAuth : function () {
                $.ajax({
                    url : '{:url("admin/Supplier/authSupplier")}',
                    type : "POST",
                    data:{'id':vm.id,'type':2,'message':vm.formData.message},
                    success : function (data) {
                        layer.confirm(data.msg, {
                            time: 20000, //20s后自动关闭
                            btn: ['关闭']
                        },function () {
                            location.reload();
                        });
                    }
                })
            },
            refresh : function () {
                this.searchData = {};
            }
        } ,
    } );


</script>
</body>
</html>